---
title: Astro 사이트를 Google의 Firebase Hosting에 배포하세요
description: Google의 Firebase Hosting을 사용하여 Astro 사이트를 웹에 배포하는 방법.
type: deploy
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Firebase Hosting](https://firebase.google.com/products/hosting)은 Google의 [Firebase](https://firebase.google.com/) 앱 개발 플랫폼에서 제공하는 서비스로, Astro 사이트 배포에 사용할 수 있습니다.

데이터베이스, 인증, 저장소 등 [Firebase 백엔드 서비스 추가](/ko/guides/backend/google-firebase/)에 대한 별도의 안내서를 참조하세요.

## 프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 서버 측 렌더링 사이트 (SSR)로 Firebase에 배포될 수 있습니다.

### 정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Firebase에 배포하기 위해 추가 구성이 필요하지 않습니다.

### SSR용 어댑터

Astro 프로젝트에서 SSR을 활성화하고 Firebase에 배포하려면 [Node.js 어댑터](/ko/guides/integrations-guide/node/)를 추가하세요.

:::note
SSR Astro 사이트를 Firebase에 배포하려면 [Blaze 요금제](https://firebase.google.com/pricing) 이상이 필요합니다.
:::

## 배포 방법

1. [Firebase CLI](https://github.com/firebase/firebase-tools)를 설치합니다. 이는 터미널에서 Firebase와 상호작용할 수 있는 명령줄 도구입니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install firebase-tools
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add firebase-tools
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add firebase-tools
      ```
      </Fragment>
    </PackageManagerTabs>

2. Google 계정으로 Firebase CLI를 인증하세요. 그러면 Google 계정에 로그인할 수 있는 브라우저 창이 열립니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase login
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase login
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase login
      ```
      </Fragment>
    </PackageManagerTabs>

3. 실험적인 웹 프레임워크 지원을 활성화합니다. 이는 Firebase CLI가 Astro의 배포 설정을 감지하고 구성할 수 있게 해주는 실험적 기능입니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase experiments:enable webframeworks
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase experiments:enable webframeworks
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase experiments:enable webframeworks
      ```
      </Fragment>
    </PackageManagerTabs>

4. 프로젝트에서 Firebase Hosting을 초기화합니다. 그러면 프로젝트 루트에 `firebase.json` 및 `.firebaserc` 파일이 생성됩니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase init hosting
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase init hosting
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase init hosting
      ```
      </Fragment>
    </PackageManagerTabs>

5. Firebase Hosting에 사이트를 배포합니다. 그러면 Astro 사이트가 빌드되어 Firebase에 배포됩니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase deploy --only hosting
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase deploy --only hosting
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase deploy --only hosting
      ```
      </Fragment>
    </PackageManagerTabs>
